<template>
    <div class="listener-list">
        <el-button @click="addListener" size="mini">添加</el-button>
        <el-table
                :data="listenerData"
                border
                size="mini"
                style="width: 100%">
            <el-table-column
                    prop="name"
                    label="名称"
                    minWidth="100">
            </el-table-column>
            <el-table-column
                    prop="event"
                    label="事件">
            </el-table-column>
            <el-table-column
                    prop="class"
                    label="类名">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="{ row }">
                    <el-button type="text" size="mini" @click="editListener(row)">编辑</el-button>
                    <el-button type="text" size="mini" @click="delListener(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="visible">
            <el-form ref="from" :model="listenerElm" label-width="120px" size="mini">
                <el-form-item label="监听器名称" prop="name">
                    <el-input v-model="listenerElm.name"></el-input>
                </el-form-item>
                <el-form-item label="事件" prop="event">
                    <el-select v-model="listenerElm.event" placeholder="请选择事件">
                        <el-option
                                v-for="item in eventEnum[type]"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类名" prop="class">
                    <el-input v-model="listenerElm.class"></el-input>
                </el-form-item>
                <el-form-item label="表达式" prop="expression">
                    <el-input v-model="listenerElm.expression"></el-input>
                </el-form-item>
                <el-form-item label="bean对象" prop="delegateExpression">
                    <el-input v-model="listenerElm.delegateExpression"></el-input>
                </el-form-item>
<!--                <el-form-item v-if="!isTaskListener" label="脚本" prop="script">-->
<!--                    <el-input-->
<!--                            type="textarea"-->
<!--                            :rows="2"-->
<!--                            v-model="listenerElm.script"></el-input>-->
<!--                </el-form-item>-->
            </el-form>
            <FieldTable v-model="listenerElm.fields"></FieldTable>
            <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="saveListener">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>
<script>
    import bpmnHelper from '../bpmnHelper'
    import FieldTable from './FieldTable'

    export default {
        mixins: [bpmnHelper],
        components: {
            FieldTable
        },
        props: {
            value: {
                type: Array,
                default() {
                    return []
                }
            },
            type: {
                type: String,
                default() {
                    return 'task'
                }
            }
        },
        data() {
            return {
                listenerList: this.value,
                listenerElm: {
                    event: '',
                    // script: '',
                    class: '',
                    expression: '',
                    delegateExpression: '',
                    name: '',
                    fields: [],
                },
                eventEnum: {
                    task: [
                        'create',
                        'assignment',
                        'complete',
                        'delete',
                        'all',
                    ],
                    execution: [
                        'start',
                        'end',
                        'take',
                    ]
                },
                listenerIndex: -1,
                visible: false,
            }
        },
        computed: {
            isTaskListener() {
                return this.type === 'task'
            },
            listenerData() {
                const type = this.isTaskListener ? 'flowable:TaskListener' : 'flowable:ExecutionListener'
                return this.listenerList.filter(x => {
                    return x.$type === type
                })
            }
        },
        watch: {
            value(n) {
                this.listenerList = n
            },
            listenerList(n) {
                this.$emit('input', n)
            },
            visible(n) {
                if (!n) {
                    this.$refs.from.resetFields()
                }
            }
        },
        methods: {
            addListener() {
                this.listenerIndex = 0
                this.visible = true
            },
          delListener(element) {
           const index = this.listenerList.indexOf(element)
            this.listenerList.splice(index,1)
            },
            editListener(element) {
                this.listenerIndex = this.listenerList.indexOf(element)
                this.visible = true
                //防止表单值无法重置
                this.$nextTick(() => {
                    for (const key in this.listenerElm) {
                        if (element.hasOwnProperty(key)) {
                            this.listenerElm[key] = element[key]
                        }
                    }
                })
            },
            trimObject() {
                const o = this.listenerElm
                const data = {}
                for (const key in o) {
                    if (o.hasOwnProperty(key) && o[key] != '') {
                        data[key] = o[key]
                    }
                }
                return data
            },
            saveListener() {
             const data = this.trimObject()
                const taskListener = this.type === 'task' ? this.createTaskListener(data) : this.createExecutionListener(data)
                if (this.listenerIndex!=-1) {
                    this.listenerList.splice(this.listenerIndex, 1, taskListener)
                } else {
                    this.listenerList.push(taskListener)
                }
                this.visible = false
            }
        }
    }
</script>
